<template>
    <div class="form-media">

        <div class="box"
             v-for="(item,index) in data" :key="item"
        >
            <img v-lazy="item" />
            <div class="close" @click="remove(index)"><i class="iconfont icon-guanbi"></i></div>
        </div>

        <!--S添加图片-->
        <div v-if="value.length < number" id="add-icon" class="box" @click="showMedia">
            <i class="iconfont icon-jiatianjiakuangxuanduoxuan-8"></i>
        </div>
        <!--S添加图片-->


    </div>
</template>

<script>
export default {
    name: "form-media",
    data() {
      return {
          data: []
      }
    },
    model: {
        prop: 'value',
        event: 'confirm'
    },
    props: {
        number: {
            type:Number,
            default:1
        },
        type: {   //默认图片选项  video等于视频
            type:String,
            default:"image"
        },
        value: {
            type:Array,
            default(){
                return []
            }
        }
    },
    watch: {
      value () {
          this.getList()
      }
    },
    mounted() {
        this.getList()
    },
    methods: {
        /**
         * 显示素材库
         */
        showMedia() {
            this.$createMedia({
                is_show: new Date().getTime(),
                select_type: this.type,
                value: this.value,
                number: this.number,
                onConfirm: (res) => {
                    this.getList()
                    this.$emit("confirm",res)
                }
            })
        },
        /**
         * 移除素材
         */
        remove(index){
            this.data.splice(index,1)
            this.$emit("remove",index)
        },
        /**
         * 请求服务器素材
         */
        getList(){
            if(this.value.length > 0){
                this.$sendGet("media/idToThumbs",{
                    ids: this.value
                })
                .then((res) => {
                    this.data = res.data.data
                });
            } else {
                this.data = []
            }
        }
    }
}
</script>

<style scoped lang="less" src="./form-media.less"></style>
